@use '../../../styles/colors';
@use '../../../styles/variables';

$message-bubble-padding: 12px;
$message-bubble-background-color: colors.$bg-color-light;
$message-bubble-color: colors.$color-text-dark;
$message-bubble-border-radius: variables.$default-border-radius;
$message-bubble-link-color: colors.$color-blue;
$message-bubble-me-background-color: colors.$color-blue;
$message-bubble-me-color: colors.$color-text-lighter;
$message-bubble-me-link-color: colors.$color-text-lighter;
$message-bubble-nude-padding: 0;
$message-bubble-quoted-padding: 12px 12px 12px 0;
$message-bubble-quoted-indicator-width: 3px;
$message-bubble-quoted-indicator-margin: (-2 * $message-bubble-quoted-indicator-width) (2 * $message-bubble-quoted-indicator-width)
	(-2 * $message-bubble-quoted-indicator-width) $message-bubble-quoted-indicator-width;
$message-bubble-quoted-indicator-border-radius: variables.$default-border-radius;
$message-bubble-quoted-indicator-color: colors.$color-green;

.message-bubble {
	display: flex;

	padding: $message-bubble-padding;

	color: $message-bubble-color;
	border-radius: $message-bubble-border-radius;

	background-color: var(--receiver-bubble-background-color, $message-bubble-background-color);
	align-items: stretch;
	flex-flow: row nowrap;
	justify-content: flex-start;

	a {
		color: var(--color, $message-bubble-link-color);
	}

	&--inverse {
		color: var(--font-color, $message-bubble-me-color);
		background-color: var(--sender-bubble-background-color, var(--color, $message-bubble-me-background-color));

		a {
			color: var(--font-color, $message-bubble-me-link-color);
		}
	}

	&--nude {
		padding: $message-bubble-nude-padding;

		background-color: transparent;
	}

	&--quoted {
		padding: $message-bubble-quoted-padding;

		background-color: var(--receiver-bubble-background-color, $message-bubble-background-color);

		&::before {
			width: $message-bubble-quoted-indicator-width;
			margin: -6px 6px -6px 3px;

			content: '';

			border-radius: $message-bubble-quoted-indicator-border-radius;
			background-color: $message-bubble-quoted-indicator-color;
		}
	}

	&--system {
		text-align: center;

		background-color: transparent;

		.message-container {
			justify-content: center;
		}
	}
}
